<template>
    <m-navbar title="公告详情"/>
    <u-loading-page
        :loading="isLoading"
        loading-text="加载中..."
        font-size="15"
    />
    <template v-if="!isLoading">
        <view :class="['w-full box-border px-18 py-20', isSafeArea ? 'pb-safe' : 'pb-20']">
            <view class="w-full fz-20 mb-10">
                {{ noticeDetail.noticeTitle }}
            </view>
            <view class="w-full fz-12 text-grey mb-16 flex-justifyBetween-itemsCenter-box">
                <text>{{ noticeDetail.createTime }} </text>
                <text>发布者：{{ noticeDetail.createUserNickName }}</text>
            </view>
            <rich-text class="w-full line-height-28 fz-14" :nodes="noticeDetail.noticeContent"/>
            <u-divider class="w-full flex-justifyCenter-itemsCenter-box" text="到底啦~"/>
        </view>
    </template>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { NoticeDetail } from '@/api/modules/announcement'

const isLoading = ref(true)

// 公告详情
const noticeDetail = ref<NoticeDetail | null>(null)

onShow(() => {
	const noticeDetailStorage = uni.getStorageSync('noticeDetail')
	noticeDetail.value = {
		...noticeDetailStorage,
		noticeContent: noticeDetailStorage.noticeContent.replaceAll('<img', '<img style="width: 100%"')
	}
	isLoading.value = false
})

// 安全区
const isSafeArea = uni.getStorageSync('isSafeArea')
</script>

<style lang="scss">
.width-content {
    width: calc(100% - 36px);
}

.announcement-post {
    height: 165px;
}

.ql-align-right {
    text-align: right;
}
</style>

